import React,{useState,useEffect,useCallback} from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Hooks(props){
	console.log('hooks')
	const [text,setText] = useState('')
	const [list,setList] = useState(['aa','bb','cc'])
	
	useEffect(()=>{
		handleAdd()
	},[list])//[依赖]。 如果指定[]，回调函数只会在第一次render()后执行
	
   const handleChange = e => {
	   setText(e.target.value)
   }
   // useCallback 记忆函数 
   // 防止因为组件成功新渲染，导致方法被重新创建，起到缓存作用
   // 主要作用优化，利用闭包缓存函数
   const handleAdd = useCallback(
	   () => {
		   if(text){
			   console.log('list1',list)
			   setList([...list,text])
			   setText('')
			   console.log('list2',list)
		   }
	   },[text]//只有text改变后，这个函数才会重新声明一次
   )
	   
   const handleDel = useCallback(
	   (index) => {
		   // console.log(index)
		   // 这一句不可以，原因未知
		   // setList(list.splice(index,1))
		   let newArray = [...list]
		   newArray.splice(index,1)
		   setList(newArray)
	   },[list]
	)
	return(
		<div>
			<input type="text" onChange={handleChange} value={text}/>
			<button onClick={handleAdd}>add</button>
			{/* 循环 */}
			<ul>
			{
				list.map((item,index) => 
				<li key={item}>
				<span className='itemTxt'>{item}</span>
				{/* handleDel一定放在函数里,原因未知 */}
				<button onClick={()=>{
					handleDel(index)
				}}>删除</button></li>
				)
			}
			
			</ul>
			
		</div>		
	)		
}

export default Hooks